<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <script src="./three.js"></script>
    <script src="./OrbitControls.js"></script>
    <script src="./stats.min.js"></script>
  </head>
  <body></body>
  <script type="x-shader/x-vertex" id="vertexShader">
    varying vec2 vUv;
    varying vec3 modelPos;
    void main() {
        vUv = uv;
        modelPos = position;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }</script>
  <script type="x-shader/x-vertex" id="fragmentShader">


    float random (float n) {
      return fract(sin(n)*1000000.);
    }  

    varying vec2 vUv;
   
    varying vec3 modelPos;
    vec3 YNormal = vec3(0.0, 1.0, 0.0);
    uniform sampler2D texture;
    uniform sampler2D texture2;
    uniform float time;
    void main() {
      // if(time >= 1.0) discard;
      vec4 color = texture2D( texture2, vUv);
      
      float t = fract(time);
      float h = texture2D( texture, vUv).r;
  
      float dissolveWidth = 4.0; // 值越大越窄

      float condition_if_1 = step(h + vUv.y*dissolveWidth, t*(dissolveWidth + 1.0) + 0.04);
      float condition_if_2 = step(h + vUv.y*dissolveWidth, t*(dissolveWidth + 1.0));
      color = mix(color, vec4(1.0 ,1.0 , 0.0, 1.0), condition_if_1 );
      color = color * (1. - condition_if_2);

      
      gl_FragColor = color;
    }
  </script>
 
  <script>
    var scene, camera, renderer, clock, controller, stats
    var shader_material

    init();
    animate();

    // - Functions -
    function init() {
      scene = new THREE.Scene();
      clock = new THREE.Clock();
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.set(0, 0, 5)
      renderer = new THREE.WebGLRenderer({
        antialias: true, // 开启抗锯齿处理
        alpha: true,
      });
      renderer.setClearColor(0xbfd1e5) // set sky color
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio)

      // console.log(new THREE.MeshPhongMaterial({color: "red"}))

      shader_material = new THREE.ShaderMaterial( {
        uniforms: {
          texture: {
            value: new THREE.TextureLoader().load('./tex2.png')
          },
          texture2: {
            value: new THREE.TextureLoader().load('./earth1.jpg')
          },
          color: {
            value: new THREE.Color(1, 0, 0)
          },
          time: {
            value: 0
          }
        },
        vertexShader: document.getElementById( 'vertexShader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
        transparent: true,
        side: THREE.DoubleSide
      });

      var axisHelper = new THREE.AxesHelper(10);
      scene.add(axisHelper);
     
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight.position.set(400, 200, 300);
      // directionalLight.castShadow = true
      scene.add(directionalLight);
      // 方向光2
      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight2.position.set(-400, -200, -300);
      scene.add(directionalLight2);
      //环境光
      var ambient = new THREE.AmbientLight(0x404040, 0.6);
      scene.add(ambient);

      stats = new Stats()
      document.body.appendChild( stats.dom );

      // --------
      var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
      var material = new THREE.MeshPhongMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
      var cube = new THREE.Mesh( geometry, shader_material );
      scene.add( cube );
      // --------

      controller = new THREE.OrbitControls(camera, renderer.domElement);
      document.body.appendChild(renderer.domElement);
      window.onresize = onResize;
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      stats.update();
      controller.update(clock.getDelta());

      if(shader_material) {
        shader_material.uniforms.time.value += 0.005
      }
    }

    function onResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
  </script>
</html>
